<template>
  <div class="box">
    <!-- <img src="@/assets/life/list(3).gif" alt="" /> -->
    <div @click="fun()">
      <img src="@/assets/life/list(1).gif" alt="" />
      <p v-text="arr[0]"></p>
    </div>
    <div>
      <img src="@/assets/life/list(2).png" alt="" />
      <p v-text="arr[1]"></p>
    </div>
    <div>
      <img src="@/assets/life/list(3).gif" alt="" />
      <p v-text="arr[2]"></p>
    </div>
    <div>
      <img src="@/assets/life/list(4).gif" alt="" />
      <p v-text="arr[3]"></p>
    </div>
    <div>
      <span class="iconfont">&#xe713;</span>
      <p>{{ text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "全部",
      arr: ["礼遇陕西", "龙信租", "智慧加油", "电影演出"],
    };
  },
  // 点击进入礼遇陕西
  methods: {
    fun() {
      this.$router.push("./liyushanxi");
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont";
  src: url("../../../assets/iconfont/iconfont.woff2?t=1664011341460")
      format("woff2"),
    url("../../../assets/iconfont/iconfont.woff?t=1664011341460") format("woff"),
    url("../../../assets/iconfont/iconfont.ttf?t=1664011341460")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.box {
  margin-bottom: 0.05rem;
  margin: 0.15rem 0;
  padding: 0.05rem;
  display: flex;
  justify-content: space-between;
  background-color: #eff;
  > div {
    width: 18%;
    text-align: center;
    > p {
      font-size: 0.14rem;
    }
    > span {
      font-size: 0.14rem;
      display: block;
      margin: 0.05rem;
    }
    > img {
      opacity: 0.5;
      width: 0.22rem;
      height: 0.25rem;
    }
  }
}
</style>